<template>

  <section>
    <app-nav/>
    <section class="bannerbox">
        <div class="banner">
            <div>
                <a>
                    <img src="ban1.jpg" />
                </a>
            </div>
        </div>
    </section>
    <section class="home-product">
        <div class=" container">
            <hgroup class="home-title-2">
                <p class="en">OUR
                    <span>PORDUCTS</span> SHOW</p>
                <p class="cn">热销产品展示</p>
            </hgroup>

            <div class="scroll">
                <div class="items" v-for="(v,i) in productList" :key="i">
                    <nuxt-link :to="{name:'about',params:{detailId:v.id}}">
                        <p class="pic">
                            <img :src="v.thumb">
                        </p>
                        <div class="box">
                            <h3>{{v.title}}</h3>
                            <p>{{v.description}}...</p>
                            <span>more ></span>
                        </div>
                    </nuxt-link>
                </div>
            </div>
        </div>
    </section>

    <section class="home-case clearfix">
        <div class="container">
            <hgroup class="home-title-2">
                <p class="en" style="color: rgb(255, 255, 255);">FIVE FEATURES</p>
                <p class="cn">五大特色</p>
            </hgroup>
            <p class="text">
            </p>
            <ul class="clearfix">
                <li v-for="(v,i) in featureList" :key="i">
                	<h3 class="h3" style="background: url(c1.png) 0px 0px no-repeat;"><a href="yuanliao.html">{{v.title}}</a></h3>
                    <em>{{v.description}}</em>
					<span><nuxt-link :to="{name:'about',params:{detailId:v.id}}">【more】</nuxt-link></span>
                </li>
            </ul>
            <br>
        </div>
    </section>

    <section class="home-news container clearfix">
        <hgroup class="home-title-2">
            <p class="en">
                <span>LATEST</span> NEWS</p>
            <p class="cn">最新资讯</p>
        </hgroup>
        <div class="home-list-aboutus">
            <img src="ban1.jpg" />
            <h4>北京
                <span>天易数聚</span>科技有限公司
                <span>ABOUT US</span>
            </h4>
            <p>{{aboutusDetail.content}}</p>
        </div>
        <ul class="home-list-news">
            <li v-for="(v,i) in newsList" :key="i">
                <dl>
                    <dt>
                        <h3>{{v.updatetime | moment("MM-DD")}}</h3>
                        <p>{{v.updatetime | moment("YYYY")}}</p>
                    </dt>
                    <dd>
                        <nuxt-link class="h3" :to="{name:'about',params:{detailId:v.id}}">{{v.title}}</nuxt-link>
                        <p>
                            &nbsp;&nbsp;{{v.description}}
                        </p>
                    </dd>
                </dl>
            </li>
        </ul>
        <br>
    </section>
<footer class="footer clearfix">
  <ul class="container clearfix">
    
    <li>
      <h3>
        <a href="#">关于我们</a>
      </h3>
      
      <a href="#">公司简介</a>
      
      <a href="/about/?196.html">荣誉资质</a>
      
    </li>
    
    <li>
      <h3>
        <a href="/list/?143_1.html">产品中心</a>
      </h3>
      
      <a href="/list/?194_1.html">男士型</a>
      
    </li>
    
    <li>
      <h3>
        <a href="/list/?15_1.html">五大特色</a>
      </h3>
      
    </li>
    
    <li>
      <h3>
        <a href="/list/?1_1.html">新闻中心</a>
      </h3>
      
      <a href="/list/?183_1.html">行业新闻</a>
      
    </li>
    
    <li>
      <h3>
        <a href="/about/?96.html">联系我们</a>
      </h3>
      
    </li>
    
    <li class="tel">服务热线
      <br/>
      <span>0514-xxxxxx</span>
    </li>
  </ul>

</footer>

<article class="copy clearfix">
  <div class="container">
    <p class="pull-left">Copyright &copy; skyease. All rights reserved</p>
    <p class="pull-right"></p>
  </div>
</article>

    
</section>
</template>

<script>
import AppLogo from "~/components/AppLogo.vue";
import AppNav from "~/components/nav.vue";
import { content } from "../model";
import Vue from "vue";
Vue.use(require("vue-moment"));

export default {
  components: {
    AppLogo,
    AppNav
  },
  data() {
    return {
      productList: [],
      featureList: [],
      newsList: [],
      aboutusDetail: {}
    };
  },
  mounted() {
    this.getProductList();
    this.getFeatureList();
    this.getNewsList();
    this.getAboutusDetail();
  },
  methods: {
    getProductList() {
      content.getList(4, 4, 0).then(res => {
        this.productList = res;
      });
    },
    getFeatureList() {
      content.getList(1, 4, 0).then(res => {
        this.featureList = res;
      });
    },
    getNewsList() {
      content.getList(4, 3, 0).then(res => {
        this.newsList = res;
      });
    },
    getAboutusDetail() {
      content.getDetail(1).then(res => {
        this.aboutusDetail = res;
      });
    }
  },
  head: {
    title: "skyease"
  }
};
</script>

<style>

</style>
